<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>天下行租车</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <link rel="stylesheet" href="css/base.css">
</head>
<body>
<div id="app">
    <header>
        <div class="c900 flex">
            <a href="index.html"><h1>天下行汽车租赁平台</h1></a>
            <span class="flex">
                <a href="addCar.html">添加车辆</a>
                <a><el-avatar src="https://img1.baidu.com/it/u=2068393135,2936134418&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></el-avatar></a>
                <a href="register.html">注册</a>
                <a href="login.html">登录</a>
            </span>
        </div>
    </header>
    <main class="c900 el-card" style="align-items: stretch;overflow: visible">
        <h2>租车记录</h2>
        <el-card style="width: 100%">
            <div class="flex" style="font-weight: bolder">
                <span>编号</span>
                <span>车辆照片</span>
                <span>品牌车型</span>
                <span>起止日期</span>
                <span style="text-align: center">金额</span>
                <span>状态</span>
                <span>操作</span>
            </div>
        </el-card>
        <el-card style="width: 100%">
            <div class="flex">
                <span>1</span>
                <span><img src="https://img1.baidu.com/it/u=3713133709,1279564402&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666" style="width: 120px;height: 90px"></span>
                <span>奔驰:e300</span>
                <span>2023-01-01<br>~<br>2023-01-03</span>
                <span class="price">900元<small>元</small></span>
                <span>未还</span>
                <span><a class="abtn">还车</a></span>
            </div>
        </el-card>
        <el-card style="width: 100%">
            <div class="flex">
                <span>2</span>
                <span><img src="https://img2.baidu.com/it/u=2804379294,175017777&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500" style="width: 120px;height: 90px"></span>
                <span>日产:轩逸</span>
                <span>2023-01-01<br>~<br>2023-01-03</span>
                <span class="price">750元<small>元</small></span>
                <span>已还</span>
                <span><a class="abtn">评价</a></span>
            </div>
        </el-card>
        <el-card style="width: 100%">
            <div class="flex">
                <span>3</span>
                <span><img src="https://img2.baidu.com/it/u=2110282461,501660684&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500" style="width: 120px;height: 90px"></span>
                <span>奔驰:迈巴赫</span>
                <span>2023-01-01<br>~<br>2023-01-03</span>
                <span class="price">2250<small>元</small></span>
                <span>已支付</span>
                <span><a class="abtn">提车</a></span>
            </div>
        </el-card>
        <div style="text-align: right; margin-top: 20px">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="1000">
            </el-pagination>
        </div>
    </main>
</div>
<script>
    var v = new Vue({
        el : "#app",
    })
</script>
</body>
</html>
<style>

</style>
